<template>
  <scroll-view scroll-y class="main bg-fff">
    <div class="bg-fff flex-center u-flex" style="position: relative;">
      <u-upload ref="upload" @on-success="uploadSuccess" :custom-btn="true"
                :show-upload-list="false"
                :size-type="['compressed']"
                :action="action" :header="header" :multiple="false">
        <div class="photo-img" slot="addBtn">
          <image mode="aspectFill" :src="list.avatar"/>
          <div class="add-icon col-1f476d font-60">
            <img style="width: 100%;height: 100%;display: block;border-radius: 50%;"
                 src="https://app.zbzedu.com/static/WaChat/img/add.png">
          </div>
        </div>
      </u-upload>
    </div>
    <u-gap height="10" bg-color="#f7f7f7"></u-gap>
    <view class="bg-fff">
      <u-field v-model="list.nickName" label="用户昵称" :clearable="false" placeholder="未填写"/>
      <u-field v-model="chooseClassName" placeholder="未填写" @click="show = true" disabled label="所在年级" right-icon="arrow-right"
               :clearable="false"/>
    </view>
    <div class="user-btn">
      <u-button type="primary" @click="save" :custom-style="customStyle" shape="circle">保存</u-button>
    </div>
    <u-select v-model="show" :list="classList" label-name="name" value-name="id" @confirm="selectConfirm"></u-select>
  </scroll-view>
</template>

<script>
import { TOAST } from '../../util/util'
import { BASE_URL, request } from '../../util/api'
import { CHECK_PHONE } from '../../util/util'
import {getCurrentFullPath} from "../../util/util";
export default {
  data () {
    return {
      customStyle: {
        background: '#1f476d',
        padding: '0 30rpx'
      },
      list: {},
      classList: [],
      show: false,
      chooseClassName: '',
      action: BASE_URL + '/common/upload'
    }
  },

  mounted () {
    this.getClassList()
  },

  computed: {
    header () {
      let info = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
      let token = info && info.token
      return {
        'Authorization': `${ token }`
      }
    }
  },

  methods: {
	  // 转发功能
	  onShareAppMessage(res) {
	    return {
	      path: getCurrentFullPath()
	    }
	  },
    // 获取年级列表
    getClassList () {
      request({
        url: '/app/base/getClassSubjectInfo'
      }).then(res => {
        this.classList = res.data
        this.getCurrentUser()
      })
    },

    getCurrentUser () {
      request({
        url: '/app/userCenter/getLoginUserInfo'
      }).then(res => {
        this.list = res.data
        if (CHECK_PHONE(this.list.nickName)) {
          this.list.nickName = ''
        }
        if (res.data.classId) {
          const classObj = this.classList.filter(item => item.id == res.data.classId)
          if (classObj.length) {
            this.chooseClassName = classObj[0].name
          }
        }
      })
    },

    selectConfirm (res) {
      this.list.classId = res[0].value
      this.chooseClassName = res[0].label
    },

    uploadSuccess (res) {
      if (res.code != 200) {
        uni.showModal({
          title: '提示',
          content: res.msg,
          showCancel: false,
          success: function (res) {

          }
        })
        return
      }
      this.$set(this.list, 'avatar', res.url)
      TOAST('上传成功！')
    },

    save () {
      let nameInfo = JSON.parse(JSON.stringify(this.list)).nickName
      nameInfo = nameInfo.replace(/[^\u4E00-\u9FA5]/g,'')
      if (nameInfo.length < 2 || nameInfo.length > 6) {
        TOAST('请输入2~6位中文昵称');
        return false;
      }
      request({
        url: '/system/normalUser/diary',
        data: {
          nickName: this.list.nickName,
          classId: this.list.classId,
          userId: uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId,
          avatar: this.list.avatar
        },
        method: 'post'
      }).then(res => {
        uni.showModal({
          title: '提示',
          content: '保存成功',
          showCancel: false,
          success: function (res) {
            uni.navigateBack()
          }
        })
      })
    }

  }
}
</script>

<style scoped lang="scss">
page {
  background: #F7F7F7;
}

.main {
  box-sizing: border-box;
  font-size: 32 upx;
  height: 100%;

  .photo-img {
    border-radius: 50%;
    margin: 0 auto;
    padding: 76upx 0;
    text-align: center;

    image {
      width: 188upx;
      height: 188upx;
      border-radius: 50%;
    }
  }

  .add-icon {
    position: absolute;
    right: 280upx;
    top: 210upx;
    width: 52upx;
    height: 52upx;
    border-radius: 50%;
    z-index: 1000;
  }

  .user-btn {
    position: fixed;
    bottom: 50rpx;
    left: 5%;
    width: 90%;
    margin: 20upx auto;
  }

  .wrap {
    margin-right: 30upx;
  }

  .pd_t_19 {
    padding-top: 20upx;
  }
}
</style>
